<template>
    <div class="mymonitor_content">
        <el-scrollbar height="100%">
            <div class="list">
                <template v-if="monitorState.collectordata.length > 0">
                <div class="item" v-for="(item,index) in monitorState.collectordata" :key="item" @click="monitorStore.savepicture(item)">
                    <div class="item_header">
                        <div>{{item.minfo.league_name}}</div>
                        <img src="@/assets/monitor/shoucang-active.png" style="width: 16px;height: 16px" alt="" @click.stop="monitorStore.clickCancelcollect(item)">
                    </div>
                    <div class="item_content">
                        <div class="form_item">
                            <div class="label">平台:</div>
                            <div class="value">{{monitorState.bctypesObj[item.bc_type]}}</div>
                        </div>
                        <div class="form_item">
                            <div class="label">主队:</div>
                            <div class="value">{{item.minfo.home_name}}</div>
                        </div>
                        <div class="form_item">
                            <div class="label">客队:</div>
                            <div class="value">{{item.minfo.away_name}}</div>
                        </div>
                        <div class="form_item">
                            <div class="label">盘口:</div>
                            <div class="value">{{item.pk_odds_key_ch}}</div>
                        </div>
                        <div class="form_item">
                            <div class="label">指数:</div>
                            <div class="value">{{item.odd}}</div>
                        </div>

                    </div>
                    
                </div>
                </template>
                <template v-else>
                    <el-empty :image-size="100" />
                </template>
            </div>
        </el-scrollbar>
    </div>
</template>

<script setup>
import { http } from '@/utils/http'
import { ElMessage, ElMessageBox } from 'element-plus'

const { monitorStore, monitorState } = inject('MonitorStore')

const deletemonitor = (row) => {
    ElMessageBox.confirm(
    '是否删除监控',
    '提示',
    {
      confirmButtonText: '删除',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
        http.delete(`/zhishu/del_monitoring`,{params:{task_code:row.task_code}}).then((res) => {
            ElMessage({
        type: 'success',
        message: '删除成功',
      })
        })
      
    })
    .catch(() => {
    })
}
</script>

<style lang="scss" scoped>
.mymonitor_content {
    width: 100%;
    height: calc(100% - 40px);
}

.list {
    display: flex;
    flex-direction: column;

    .item {
        height: 124px;
        padding: 12px;
        border-bottom: 1px solid #ebebeb;
        display: flex;
        flex-direction: column;
        cursor: pointer;
    }
}

.item_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: #000;
}

.item_content {
    display: flex;
    flex-direction: column;
    margin: 8px 0;

    .form_item {
        display: flex;
        align-items: center;
        height: 18px;

        .label {
            font-size: 12px;
            color: #8a8a8a;
        }

        .value {
            margin-left: 4px;
            font-size: 12px;
            font-weight: bold;
            color: #000;
            display: flex;
            align-items: center;

        }
    }

}
.item_select{
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}
.item_select .text {
    font-size: 11px;
    font-weight: bold;
    color: #000000;
    display: flex;

}

.item_select .text .num {
    background-color: #e92937;
    margin-left: 4px;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    color: #fff;
    padding: 0 4px 0 4px;
    border-radius: 7px;
}
</style>